<template>
  <m-container class="start-out">
    <out-work-top-cell :info="info" />

    <m-cell-group weight="label" size="sm" :border="false">
      <m-cell label="目标站点" size="xs" />
      <m-cell>
        <view class="row" slot="center">
          <view class="row_radio">
            <m-radio-group inline v-model="type" @change="handleChangeType">
              <m-radio-button :label="1">
                <u-image width="60rpx" height="60rpx" src="@/static/mt2.png" v-if="type === 1" />
                <u-image width="60rpx" height="60rpx" src="@/static/mt.png" v-else />
                <text>系统分配</text>
              </m-radio-button>
              <m-radio-button :label="2" @click.stop="handleChangeType">
                <u-image width="60rpx" height="60rpx" src="@/static/mt2.png" v-if="type === 2" />
                <u-image width="60rpx" height="60rpx" src="@/static/mt.png" v-else />
                <text>人工指定</text>
              </m-radio-button>
            </m-radio-group>
          </view>
          <view v-if="type === 2" class="text"> 码头具体位置：{{ imsText }} </view>
        </view>
      </m-cell>
    </m-cell-group>

    <out-work-wharf-popup v-model="show" @confirm="handleDeliveryTargetCode" />

    <m-fixed>
      <m-button width="100%" size="xl" @click="handleClickConfirm">确认出库</m-button>
    </m-fixed>
  </m-container>
</template>

<script>
import { showModal } from '@/hooks'
import { router } from '@/router'
import { getOutOrder, verifyOutOrder } from '@/api/modules/out-work'

export default {
  data() {
    return {
      show: false,
      type: 1,
      info: {},
      wharfId: 0,
      imsText: '',
    }
  },
  async onLoad(options) {
    const { data } = await getOutOrder(options.id)
    this.info = data
  },

  methods: {
    handleDeliveryTargetCode(e) {
      this.wharfId = +e.wharfId
      this.imsText = e.imsText + '/' + e.codeTxt
      this.imsId = e.imsId
    },
    handleClickConfirm() {
      if (this.type === 2 && this.wharfId === 0) {
        uni.showToast({
          title: '请选择码头',
          icon: 'none',
        })
        return
      }

      showModal({
        title: '确认出库提示',
        content: '请问您确认要出库吗?',
        showCancelButton: true,
        confirm: async () => {
          await verifyOutOrder({
            ...this.info,
            wharfId: this.type === 2 ? this.wharfId : null,
          })
          router.replace({
            name: 'OutWorkTask',
            params: {
              id: this.info.outOrderId,
            },
          })
        },
      })
    },
    handleChangeType() {
      if (this.type === 2) {
        this.show = true
      } else if (this.type === 1) {
        this.wharfId = 0
        this.imsText = ''
      }
    },
    handleChange() {},
  },
}
</script>

<style lang="scss" scoped>
.start-out {
  .center {
    padding-left: 80rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .row_radio {
    margin-bottom: 10rpx;
    .radio {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 196rpx;
      background: #fff;
      border-color: #d7dce0;
      color: #748da7;
      &--checked {
        border-color: #248dfa;
        color: #248dfa;
      }
      text {
        margin-top: 19rpx;
        font-size: 28rpx;
      }
    }
  }

  .text {
    text-align: center;
    font-size: 25rpx;
    color: #00a8f0;
    font-weight: bold;
  }
}
</style>
